<template>
  <div class="category">
    <div class="top">
        <h1>商品分类</h1>
    </div>
    <div class="bottom">
        <van-sidebar v-model="activeKey">
        <van-sidebar-item
        v-for="category in categories"
        :key="category.id"
        :title="category.name"
        :to="`/category/sub?id=${category.id}`"
        />
        </van-sidebar>

    <!-- 右侧子分类渲染 -->
    <div class="sub-category">
        <router-view />
    </div>
    </div>
  </div>
</template>

<script>
import { getCategories } from '@/api/home'
console.log(getCategories)
export default {
  name: 'Category',
  data() {
    return {
      activeKey: 0,
      // 左侧栏所有的主分类
      categories: [],
    }
  },
  async created() {
    // 查询主分类
    // 把后端返回回来的data数据中的list数据解构出来
    const { list } = await getCategories()
    // 改变实例组件中data的catagories属性值
    this.categories = list.slice(1)
    // 默认向第一个子分类页面跳转，编程式的导航
    this.$router.push('/category/sub?id=' + this.categories[0].id)
  },
}
</script>

<style lang="less" scoped>
.category{
    display: flex;
    flex-direction: column;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    .bottom{
        display: flex;
        .sub-category {
        flex: 1;
        background-color: #eae9e5;
        padding-top: 70px;
        }
    }
    .top{
    width: 100%;
    height: 200px;
    background-color: #c1ab96;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;

    h1{
        color: white;
        margin-top: 110px;
        margin-left: 20px;
    }
    }
}
</style>
